import { useState, useEffect } from "react";

export default function Time() {
  const [currentTime, setCurrentTime] = useState({
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    day: new Date().getDate(),
    hours: new Date().getHours(),
    minutes: new Date().getMinutes(),
    seconds: new Date().getSeconds(),
  });

  useEffect(() => {
    const timer = setInterval(() => {
      const year =
        new Date().getFullYear() < 10
          ? "0" + new Date().getFullYear()
          : new Date().getFullYear();
      const month =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      const day =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      const hours =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      const minutes =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      const seconds =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      setCurrentTime({
        year,
        month,
        day,
        hours,
        minutes,
        seconds,
      });
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className=" flex items-center justify-center h-full">
      <span className="text-[18px] text-custom-gray mr-4">
        {currentTime.year}-{currentTime.month}-{currentTime.day}
      </span>
      <span className="text-[18px] text-custom-gray mr-4">
        {currentTime.hours}:{currentTime.minutes}:{currentTime.seconds}
      </span>
    </div>
  );
}
